<template>
	<div class="app-container">
		<div id="vmain" class="m-content-box">
			<div class="contract-initiate">
				<div class="contract-initiate__hd">
					<div class="contract-initiate__hd-title">使用电子合同</div>
					<div class="contract-initiate__hd-sub-title">随时随地在线签署，避免会员纠纷，合法合规有保障</div>
					<div class="contract-initiate__hd-btns">
						<el-button type="success" class='bac6b7' @click="go">使用合同模板发起签署</el-button>
						<!-- <el-button type="warning" class="bac759" @click="go">直接上传文件发起签署</el-button> -->
					</div>
				</div>
				<div class="contract-initiate__desc">
					<div class="contract-initiate__desc-item">
						<div class="contract-initiate__desc-icon">
							<img src="../../../public/img/initiate-1.svg" alt="">
						</div>
						<div class="contract-initiate__desc-title">合法合规有效</div>
						<div class="contract-initiate__desc-content">E签宝官方合作</div>
						<div class="contract-initiate__desc-content">国家CA数字证书</div>
						<div class="contract-initiate__desc-content">人脸识别身份认证</div>
					</div>
					<div class="contract-initiate__desc-item">
						<div class="contract-initiate__desc-icon">
							<img src="../../../public/img/initiate-2.svg" alt="">
						</div>
						<div class="contract-initiate__desc-title">线上便捷签署</div>
						<div class="contract-initiate__desc-content">系统线上发起</div>
						<div class="contract-initiate__desc-content">会员短信签署</div>
						<div class="contract-initiate__desc-content">快捷方便</div>
					</div>
					<div class="contract-initiate__desc-item">
						<div class="contract-initiate__desc-icon">
							<img src="../../../public/img/initiate-3.svg" alt="">
						</div>
						<div class="contract-initiate__desc-title">会员关联存档</div>
						<div class="contract-initiate__desc-content">合同关联会员</div>
						<div class="contract-initiate__desc-content">云端存储归档</div>
						<div class="contract-initiate__desc-content">查找方便</div>
					</div>
					<div class="contract-initiate__desc-item">
						<div class="contract-initiate__desc-icon">
							<img src="../../../public/img/initiate-4.svg" alt="">
						</div>
						<div class="contract-initiate__desc-title">法律纠纷举证</div>
						<div class="contract-initiate__desc-content">权威司法鉴定机构参与</div>
						<div class="contract-initiate__desc-content">区块链证据保全</div>
						<div class="contract-initiate__desc-content">出具有效性证明</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getContractNum,
		contract_num
	} from '@/api/contract'
	export default {
		name: 'contractinitiate',
		components: {},
		data() {
			return {
				nums: 0,
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '发起合同',
				url: '/contract/contractinitiate',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
			this.getnum()
		},
		methods: {
			// 获取合同剩余份数
			getnum(){
				this.listLoading = true
				contract_num({}).then(response => {
					const {
						data
					} = response
					this.nums = data
					this.listLoading = false
				}).catch(error => {
					this.listLoading = false
					console.log(error)
				})
			},
			go() {
				if(this.nums > 0){
					this.$router.push({
						path: '/contract/contractTemplate'
					})
				}else{
					this.$confirm('您的可用合同份数为0，请充值后使用', '提示', {
						cancelButtonText: '取消',
						confirmButtonText: '去充值'
					}).then(() => {
						this.$router.push({
							path: '/contract/contractRecharge'
						})
					}).catch(() => {})
				}
			},
			getList(){
				getContractNum().then(response => {
					const {
						data
					} = response
					this.nums = data
				}).catch(error => {
					this.nums = 0
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */
	.m-content-box {
		position: relative;
		padding: 30px 63px;
	}

	.contract-initiate {
		width: 878px;
		margin: 0 auto;
	}

	.contract-initiate__hd {
		padding-top: 90px;
		text-align: center;
	}

	.contract-initiate__desc {
		display: flex;
		margin-top: 80px;
		justify-content: space-between;
	}

	.contract-initiate__hd-title {
		margin-bottom: 16px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__hd-sub-title {
		margin-bottom: 40px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__hd-btns {
		display: flex;
		justify-content: center;
	}

	.contract-initiate__desc-item {
		width: 200px;
		height: 292px;
		background: #ffffff;
		box-shadow: 0 2px 6px 5px rgba(242, 242, 242, .5);
		border-radius: 10px;
		box-sizing: border-box;
		text-align: center;
	}

	.contract-initiate__desc-icon {
		padding-top: 32px;
		line-height: 1;
	}

	.contract-initiate__desc-title {
		margin: 36px 0 24px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
	}

	.contract-initiate__desc-content {
		height: 26px;
		line-height: 1;
		color: #787878;
	}
</style>